<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>JS Basic</title>

		<script type="text/javascript" src="jquery-1.9.1.js"></script>
		<script type="text/javascript">
			function test(){
				$('#div1').html("Hello Jquery");
			}
			$(document).ready(function() {
				/*$('#testBtn').on('click',test);				*/
				$('#testBtn').on('click',function(){
					$('#div1'). html($('#div1'). html()+'Hello Jquery<br/>');
				});// end of $('#testBtn').on
				$('#testBtnCSS').on('click',function(){
					$('#div1').addClass('testClass');
				});//end of $('testBtnCSS').on

				$('#testBtnFadeIn').on('click',function(){
					$('#div1').fadeIn('slow');
				});// end of $('#testBtnFade').on
				$('#testBtnFadeOut').on('click',function(){
					$('#div1').fadeOut('slow');
				});// end of $('#testBtnFade').on
			});//$(document).ready

			
		</script>
		<style type="text/css">
			.testClass{
				width: 300px;
				height: 200px;
				background-color: #000;
				color: #0F0;
			}
		</style>
	</head>
	<body>
		<input type="button" id="testBtn" value="Test"> 
		<input type="button" id="testBtnCSS" value="AddCCS"> 
		<input type="button" id="testBtnFadeIn" value="FadeIn"> 
		<input type="button" id="testBtnFadeOut" value="FadeOut"> 
		<div id="div1">
		</div>

	</body>
</html>